<#import "template/consumer_layout.ftl" as layout>
<@layout.consumer_layout "${PageTitle}" >
	<div class="flat_area grid_16">
		<h2>Profile Details</h2>
		<p>You can edit your Profile information from here.</p>
	</div>
	<form>
		<div class="box grid_8 round_all">
			<h2 class="box_head grad_colour">Prime Details</h2>
			<a href="#" class="grabber">&nbsp;</a>
			<a href="#" class="toggle">&nbsp;</a>
			<div class="toggle_container">
				<div class="block">
					<label>Username</label>
					<input title="Your login username" type="text" class="large required" autofocus readOnly> 
					<label>First Name</label> 
					<input title="Your First Name" type="text" class="large required" autofocus> 
					<label>Last Name</label> 
					<input title="Your Last Name" type="text" class="medium">
					<label>Home/Office Phone</label> 
					<input title="Your home or office phone number" type="text" class="large">
					<label>Mobile/Cellular Phone</label>
					<input title="Your mobile / cellular phone number" type="text" class="large">
					<label>E-Mail</label>
					<input title="your email address" type="text" class="large">
					<label>Date of Birth</label>
					<input type="text" class="datepicker"> 
					<label>Address</label>
					<textarea></textarea>
				</div>
			</div>
		</div>
		<div class="box grid_8 round_all">
			<h2 class="box_head grad_colour">Secondary Details</h2>
			<a href="#" class="grabber">&nbsp;</a>
			<a href="#" class="toggle">&nbsp;</a>
			<div class="toggle_container">
				<div class="block">
					<label>Country</label>
						<div class="input_group">
							<select>
								<#list Country as country>
									<option value="${country['id']}">
										${country["country"]}
									</option>
								</#list>
							</select>
						</div>
						<label>State</label>
						<div class="input_group">
							<select>
								<#list State as state>
									<option value="${state['id']}">
										${state["state"]}
									</option>
								</#list>
							</select>
						</div>
						<label>City</label>
						<div class="input_group">
							<select>
								<#list City as city>
									<option value="${city['id']}">
										${city["city"]}
									</option>
								</#list>
							</select>
						</div>
						<label>Zip</label>
						<input title="A tooltip can be set on any object by giving it a title property" type="text" class="large">
						<label>Date of Joining</label>
						<input title="A tooltip can be set on any object by giving it a title property" type="text" class="large">
						<label>Date of Updation</label>
						<input title="A tooltip can be set on any object by giving it a title property" type="text" class="large">
						<label>Security Question</label>
						<input title="A tooltip can be set on any object by giving it a title property" type="text" class="large">
						<label>Security Answer</label>
						<textarea></textarea>
						<button class="button_colour">
							<img height="24" width="24" alt="Bended Arrow Right" src="images/bended_arrow_right.png">
							<span>Save</span>
						</button>
				</div>
			</div>
		</div>
	</form>
</@layout.consumer_layout>